import { defineStore } from 'pinia'

export enum Theme {
  Dark = 'dark',
  Light = 'light',
}

export const useThemeStore = defineStore('theme', {
  state: () => ({
    theme: Theme.Light,
  }),
  actions: {
    setTheme(theme: Theme) {
      this.theme = theme
      document.documentElement.setAttribute('data-theme', this.theme)
      localStorage.setItem('theme', this.theme)
    },
    init() {
      const theme = localStorage.getItem('theme')
      if (theme) {
        this.theme = theme as Theme
        document.documentElement.setAttribute('data-theme', theme)
      }
    },
  },
  getters: {
    currentTheme: (state) => state.theme,
  },
})
